<template>
	<view class="rich" :style="`background: url(${$util.prefix('game/rich_bg.png')}) 0 0 no-repeat;`">
		<scroll-view scroll-y="true">
			<view class="title">玩法说明</view>
			<view class="text">1、森林茶会是娱乐小游戏，通过购买食物来吸引小动物，从而获得对应奖励。</view>
			<view class="text">2、总共有8种类型食物和小动物，每种食物只能吸引一种类型小动物。</view>
			<view class="text">3、每局茶会倒计时，你有30S时间来购买食物来吸引小动物。</view>
			<view class="text">4、购买食物需要银叶。你可以购买不同类型的食物吸引动物，也可以使用多个银叶购买相同食物，获得的奖励也会对应加倍！</view>
			<view class="text">5、选择食材银叶不足时，可通过购买头像框获取银叶，参与玩法。</view>
			<view class="text">6、BOSS战玩法：BOSS会和该局小动物一起出来，这时所有人选择的食物都可吸引IBOSS，最终吸引BOSS的食物获得额外礼物。</view>

			<view class="h40"></view>
			<view class="title">特别提示</view>
			<view class="text">
				1、用户通过该玩法获得的随机礼物仅限于在平台内使用，不得以任何形式兑换成法定货币、现金或其他任何具有交换价值的物品或服务；禁止主持、用户及其他第三方主体进行任何形式的礼物交易，否则一经查实，平台将严格按照平台规则对主持、用户采取包括但不限于封号、冻结交易、清空违规资产、终止服务等处罚措施，平台亦不保障前述交易的道具、权益及虚拟财产的有效性，主持、用户应自行承担法律责任及相关损失。请用户谨防上当受骗
			</view>
			<view class="text">2、平台可能在聊天室展示用户帐号信息及所获得的随机礼物等信息，您授权并同意平台为此使用并展示您的公开帐号信息（如头像、昵称等）及所获得的随机礼物等信息。</view>

			<view class="h40"></view>
			<view class="title">奖励概率</view>
			<view class="text">1、选择食材后有机会获得精美礼物，以下概率的计算方法为单位时间（如1天）内全体参与森林茶会游戏用户的整体获奖概率并不代表单个特定用户参与玩法收获相应礼物的概率，具体概率如下：
			</view>

			<view class="table">
				<view class="th flex_center">
					<view class="item flex_c">
						<text>动物及概率</text>
						<text>(千分制)</text>
					</view>
					<view class="item flex_c">
						<text>喜欢食物</text>
					</view>
					<view class="item flex_c">
						<text>获得奖励</text>
					</view>
					<view class="item flex_c">
						<text>奖励</text>
						<text>价值倍数</text>
					</view>
				</view>

				<!-- 猴子 -->
				<view class="tr flex_center white" v-for="(item,index) in list" :key="index">
					<!-- 动物及概率 -->
					<view class="item flex_r_around">
						<view class="flex_center">
							<view class="image">
								<image :src="$util.prefix(`game/elephant2.png`)" mode="widthFix" v-if="item.id == 1">
								</image>
								<image :src="$util.prefix(`game/raccoon2.png`)" mode="widthFix" v-if="item.id == 2">
								</image>
								<image :src="$util.prefix(`game/monkey2.png`)" mode="widthFix" v-if="item.id == 3">
								</image>
								<image :src="$util.prefix(`game/lion2.png`)" mode="widthFix" v-if="item.id == 4">
								</image>
								<image :src="$util.prefix(`game/rabbit2.png`)" mode="widthFix" v-if="item.id == 5">
								</image>
								<image :src="$util.prefix(`game/panda2.png`)" mode="widthFix" v-if="item.id == 6">
								</image>
								<image :src="$util.prefix(`game/fox2.png`)" mode="widthFix" v-if="item.id == 7"></image>
								<image :src="$util.prefix(`game/tiger2.png`)" mode="widthFix" v-if="item.id == 8">
								</image>
							</view>
							<view class="right">
								<view class="name">{{
										item.id == 1 ? '大象'
										: item.id == 2 ? '浣熊'
										: item.id == 3 ? '猴子'
										: item.id == 4 ? '狮子'
										: item.id == 5 ? '兔子'
										: item.id == 6 ? '熊猫'
										: item.id == 7 ? '狐狸'
										: item.id == 8 ? '老虎'
										: ''
									}}</view>
								<view class="text">{{ item.show_odds }}</view>
							</view>
						</view>
					</view>

					<!-- 喜欢食物 -->
					<view class="item flex_r_around">
						<view class="flex_center">
							<view class="food-image">
								<image :src="$util.prefix(`game/gift_image${item.id}.png`)" mode="aspectFill">
								</image>
							</view>
							<view class="right">
								<!-- 1=树叶，2=玉米，3=香蕉，4=肉块，5=胡萝卜，6=竹子，7=苹果，8=火腿 -->
								<view class="name">{{
										item.id == 1 ? '树叶'
										: item.id == 2 ? '玉米'
										: item.id == 3 ? '香蕉'
										: item.id == 4 ? '肉块'
										: item.id == 5 ? '胡萝卜'
										: item.id == 6 ? '竹子'
										: item.id == 7 ? '苹果'
										: item.id == 8 ? '火腿'
										: ''
									}}</view>
							</view>
						</view>
					</view>

					<!-- 获得奖励 -->
					<view class="item flex_r_around">
						<view class="flex_center">
							<view class="food-image">
								<image :src="item.gift_image" mode="aspectFill">
								</image>
							</view>
							<view class="right">
								<view class="name">{{ item.gift_name }}</view>
								<view class="gold flex_center">
									<image src="/static/recharge/gold_coins.png" mode="aspectFill"></image>
									<view class="text">{{ Number(item.jinbi_price).toFixed(0) }}</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 倍数 -->
					<view class="item flex_r_around">
						<view class="right">
							<view class="name">{{ item.double_num }}倍</view>
						</view>
					</view>
				</view>

			</view>

			<view class="text">2、该玩法禁止未成年人参加，请适度参与，勿沉迷其中。</view>
			<view class="text">3、本玩法旨在提升用户互动体验，仅供交流娱乐之目的。主持用户及其他任何主体均不与任何非法目的与方式进行使用。</view>
			<view class="text">
				4、禁止将获取的礼物实施任何影响互动公平性的行为，或利用产品BUG、使用外挂、插件、模拟器等不正当手法参与互动，一旦发生上述情况，平台有权取消发放对应奖励，追回奖励，对情节严重的，平台保留一切追究法律责任的权利。
			</view>
			<view class="text">5、同一账号、同一手机号、同一个设备或同一个提现账户，均视为同一个用户，仅可获得一个参与活动资格。消费过程中请用户妥善保管好自己的账号、密码、手机验证码等登录凭证。</view>
			<view class="text">6、活动期间，因用户操作不当或用户所在地网络、支付平台、电信运营商、第三方平台等故障或限制导致的用户无法参与活动或参与失败的，平台无需为此承担任何法律责任。</view>
			<view class="text">7、欢迎用户积极向平台举报任何形式的违法违规、违反平台规则的行为，一经查证属实，将严肃处理，涉及违法犯罪的，平台将积极配合有关部门进行调查。</view>
			<view class="text">8、平台保留在法律范围内对上述规则进行解释的权利。</view>
			<view class="text">9、本活动与Applelnc无关。</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
			}
		},
		methods: {
			getGiftConfig() {
				this.$get('/active.animalPrize/getGiftConfig').then(res => {
					this.list = res.data.list;
				});
			},

		},

		created() {
			this.getGiftConfig();
		}
	}
</script>

<style lang="less" scoped>
	.rich {
		width: 100vw;
		height: 688rpx;
		background-size: 100% !important;
		padding: 140rpx 60rpx 64rpx 80rpx;
		overflow: hidden;

		scroll-view {
			height: 100%;
		}
	}

	.h40 {
		height: 40rpx;
	}

	.title {
		font-weight: 500;
		font-size: 28rpx;
		color: #954100;
		line-height: 40rpx;
		text-align: center;
		margin-bottom: 16rpx;
	}

	.text {
		font-weight: 500;
		font-size: 24rpx;
		color: #954100;
		line-height: 36rpx;
	}

	.table {
		margin: 30rpx 0;

		.th {
			height: 112rpx;
			background: #FFE8C2;

			.item {
				flex: 1;

				text {
					font-weight: 500;
					font-size: 24rpx;
					color: #954100;
					line-height: 34rpx;
				}
			}
		}

		.white {
			background: #FDF7CF;
		}

		.yellow {
			background: #FBEC96;
		}

		.tr {

			.item {
				flex: 1;
				height: 112rpx;

				.image {
					width: 88rpx;
					height: 71rpx;
					overflow: hidden;

					image {
						width: 88rpx;
					}
				}

				.food-image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 6rpx;

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}

				.gold {
					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 4rpx;
					}

				}

				.right {
					.name {
						font-size: 24rpx;
						color: #8D440E;
						line-height: 28rpx;
					}

					.text {
						font-size: 24rpx;
						color: #8D440E;
					}
				}
			}
		}
	}
</style>